import { IAnyObject } from '../../../typings/base-type';
import { componentAllMap } from '../../../core/formItemConfig';
import { ComponentTypeEnum } from '/@/components/ModelTable/index';
import { DICT } from '/@/enums/dict';
import { EditColumn } from '/@/components/HEditTable';

import { getDictTypeListApi } from '/@/api/admin/dict';
export const globalConfigState: { span: number } = {
  span: 24,
};

export const UpdateTypeList = [
  {
    label: '可读写',
    value: 1,
  },
  {
    label: '必读写',
    value: 2,
  },
  {
    label: '只读',
    value: 0,
  },
];

export interface IBaseFormAttrs {
  name: string; // 字段名
  label: string; // 字段标签
  component?: string; // 属性控件
  componentProps?: ((opt: { record: Recordable }) => Recordable) | IAnyObject; // 传递给控件的属性
  exclude?: string[]; // 需要排除的控件
  includes?: string[]; // 符合条件的组件
  on?: IAnyObject;
  children?: IBaseFormAttrs[];
  category?: 'control' | 'input';
  required?: boolean;
}

export interface IBaseFormItemControlAttrs extends IBaseFormAttrs {
  target?: 'props' | 'options'; // 绑定到对象下的某个目标key中
}

export const baseItemColumnProps: IBaseFormAttrs[] = [
  {
    name: 'span',
    label: '栅格数',
    component: 'Slider',
    on: {
      change(value: number) {
        globalConfigState.span = value;
      },
    },
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },

  {
    name: 'offset',
    label: '栅格左侧的间隔格数',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'order',
    label: '栅格顺序,flex 布局模式下有效',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'pull',
    label: '栅格向左移动格数',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'push',
    label: '栅格向右移动格数',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'xs',
    label: '<576px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'sm',
    label: '≥576px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'md',
    label: '≥768p 响应式栅格',
    component: 'Slider',

    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'lg',
    label: '≥992px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'xl',
    label: '≥1200px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: 'xxl',
    label: '≥1600px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
  {
    name: '≥2000px',
    label: '≥1600px 响应式栅格',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '' },
    },
  },
];

// 控件属性面板的配置项
export const baseFormItemProps: IBaseFormAttrs[] = [
  {
    // 动态的切换控件的类型
    name: 'component',
    label: '控件',
    required: true,
    component: 'Select',
    // @ts-ignore
    componentProps: ({ record, client = 0 }) => {
      const options = componentAllMap[client].map((item) => ({
        value: item.component,
        label: item.label,
        key: item.label,
        data: item.componentProps,
      }));

      return {
        options,
        onChange: (v, { data }) => {
          const typeEnum = ComponentTypeEnum;

          const typeField = 'componentType';

          record[typeField] = typeEnum[v] || 0;

          record.componentProps = data;
        },
      };
    },
  },

  {
    name: 'field',
    label: '字段标识',
    component: 'Input',
    required: true,
    componentProps: {
      type: 'Input',
      placeholder: '请输入字段标识',
    },
    exclude: ['Grid'],
  },
  {
    required: true,
    name: 'updateType',
    label: '读写设置',
    component: 'RadioGroup',
    componentProps: {
      options: UpdateTypeList,
    },
    exclude: ['Grid', 'HFormTitle'],
  },
  {
    name: 'label',
    label: '标签',
    component: 'Input',
    required: false,
    componentProps: {
      type: 'Input',
      placeholder: '请输入标签',
    },
    exclude: ['Grid'],
  },
  {
    name: 'dataType',
    label: '数据类型',
    component: 'ApiSelect',
    componentProps: {
      api: getDictTypeListApi,
      labelField: 'label',
      valueField: 'intValue',
      placeholder: '请选择数据类型',
      params: {
        type: DICT.DATA_TYPE,
      },
      getPopupContainer: () => document.body,
    },
    exclude: ['Grid', 'HFormTitle'],
  },

  {
    name: 'labelWidth',
    label: '标签固定宽度',
    component: 'Input',
    componentProps: {},
    exclude: ['Grid', 'HFormTitle'],
  },
  // {
  //   name: 'helpMessage',
  //   label: '提示信息',
  //   component: 'Input',
  //   componentProps: {
  //     placeholder: '请输入提示信息',
  //   },
  //   exclude: ['Grid'],
  // },
];

// 控件属性面板的配置项
export const advanceFormItemProps: IBaseFormAttrs[] = [
  {
    name: 'labelAlign',
    label: '标签对齐',
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '靠左',
          value: 'left',
        },
        {
          label: '靠右',
          value: 'right',
        },
      ],
    },
    exclude: ['Grid', 'HFormTitle'],
  },

  // {
  //   name: 'help',
  //   label: 'help',
  //   component: 'Input',
  //   componentProps: {
  //     placeholder: '请输入提示信息',
  //   },
  //   exclude: ['Grid'],
  // },
  // {
  //   name: 'extra',
  //   label: '额外消息',
  //   component: 'Input',
  //   componentProps: {
  //     type: 'InputTextArea',
  //     placeholder: '请输入额外消息',
  //   },
  //   exclude: ['Grid'],
  // },
  // {
  //   name: 'validateTrigger',
  //   label: 'validateTrigger',
  //   component: 'Input',
  //   componentProps: {
  //     type: 'InputTextArea',
  //     placeholder: '请输入validateTrigger',
  //   },
  //   exclude: ['Grid'],
  // },
  // {
  //   name: 'validateStatus',
  //   label: '校验状态',
  //   component: 'RadioGroup',
  //   componentProps: {
  //     options: [
  //       {
  //         label: '默认',
  //         value: '',
  //       },
  //       {
  //         label: '成功',
  //         value: 'success',
  //       },
  //       {
  //         label: '警告',
  //         value: 'warning',
  //       },
  //       {
  //         label: '错误',
  //         value: 'error',
  //       },
  //       {
  //         label: '校验中',
  //         value: 'validating',
  //       },
  //     ],
  //   },
  //   exclude: ['Grid'],
  // },
];
// 控件属性面板的配置项
export const advanceFormItemColProps: IBaseFormAttrs[] = [
  {
    name: 'labelCol',
    label: '标签宽度',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '12', 24: '24' },
    },
    exclude: ['Grid', 'HFormTitle'],
  },
  {
    name: 'wrapperCol',
    label: '控件宽度',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '12', 24: '24' },
    },
    exclude: ['Grid', 'HFormTitle'],
  },
];

export const formItemColProps: IBaseFormAttrs[] = [
  {
    name: 'colProps',
    label: '行宽',
    component: 'Slider',
    componentProps: {
      max: 24,
      min: 0,
      marks: { 12: '12', 24: '24' },
    },
    exclude: ['Grid', 'HFormTitle'],
  },
];
export const baseFormItemControlAttrs: IBaseFormItemControlAttrs[] = [
  // {
  //   name: 'required',
  //   label: '必填项',
  //   component: 'Checkbox',
  //   exclude: ['alert'],
  // },
  // {
  //   name: 'hidden',
  //   label: '隐藏',
  //   component: 'Checkbox',
  //   exclude: ['alert'],
  // },
  // {
  //   name: 'hiddenLabel',
  //   component: 'Checkbox',
  //   exclude: ['Grid'],
  //   label: '隐藏标签',
  // },
  // {
  //   name: 'colon',
  //   label: 'label后面显示冒号',
  //   component: 'Checkbox',
  //   componentProps: {},
  //   exclude: ['Grid'],
  // },
  // {
  //   name: 'hasFeedback',
  //   label: '输入反馈',
  //   component: 'Checkbox',
  //   componentProps: {},
  //   includes: ['Input'],
  // },
  // {
  //   name: 'autoLink',
  //   label: '自动关联',
  //   component: 'Checkbox',
  //   componentProps: {},
  //   includes: ['Input'],
  // },
  // {
  //   name: 'validateFirst',
  //   label: '检验证错误停止',
  //   component: 'Checkbox',
  //   componentProps: {},
  //   includes: ['Input'],
  // },
];

export const ruleColumns: EditColumn[] = [
  {
    label: '是否必填',
    class: 'w-20',
    dataIndex: 'required',
    component: 'Switch',
    defaultValue: false,
    componentProps: {},
  },
  {
    label: '校验文案',
    dataIndex: 'message',
    component: 'Input',
    defaultValue: false,

    required: true,
    componentProps: {
      placeholder: '请输入校验文案',
    },
  },
  {
    label: '触发时机',
    dataIndex: 'trigger',
    component: 'Select',
    defaultValue: false,
    required: true,
    class: 'w-30',
    componentProps: {
      style: 'width:100%',
      placeholder: '请选择触发时机',
      mode: 'multiple',
      options: [
        {
          label: '失焦',
          value: 'blur',
        },
        {
          label: '值变化',
          value: 'change',
        },
      ],
    },
  },
  {
    label: '正则表达式',
    dataIndex: 'pattern',
    component: 'Select',
    defaultValue: false,
    class: 'w-40',
    componentProps: {
      style: 'width:100%',
      placeholder: '请选择正则表达式',
      allowClear: true,
      options: [
        {
          label: '仅支持英文和整数',
          value: 'enNumber',
        },
        {
          label: '仅支持数字',
          value: 'number',
        },
        {
          label: '仅支持中文',
          value: 'zh',
        },
        {
          label: '仅支持中文及中文特殊字符',
          value: 'includesZh',
        },
        {
          label: '仅支持大小写字母、数字、-',
          value: 'upperAndLowerNum',
        },
        {
          label: '仅支持手机号',
          value: 'mobile',
        },
        {
          label: '仅支持邮箱',
          value: 'email',
        },
        {
          label: '仅支持身份证号',
          value: 'iDCard',
        },
        {
          label: '仅支持正整数',
          value: 'pureNumber',
        },
        {
          label: '仅支持大于0的两位小数',
          value: 'float0_infinity',
        },
        {
          label: '仅支持大于0的三位小数',
          value: 'float0_infinity_3',
        },
        {
          label: '仅支持1-9的整数',
          value: 'number1_9',
        },
        {
          label: '仅支持1-31的整数',
          value: 'number1_31',
        },
        {
          label: '仅支持1-99的整数',
          value: 'number1_99',
        },
        {
          label: '仅支持1-9999的整数',
          value: 'number1_9999',
        },
        {
          label: '仅支持0-1的两位小数',
          value: 'float0_1',
        },
        {
          label: '仅支持0-99的两位小数',
          value: 'float0_99',
        },
        {
          label: '仅支持0-99的三位小数',
          value: 'float0_99_3',
        },
      ],
    },
  },
  {
    dataIndex: '',
    label: '操作',
    slot: 'action',
    class: 'w-20',
  },
];
